<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="auto">
        <el-form-item label="状态">
            <el-select v-model="form.itemId" placeholder="请选择项目" style="width: 220px">
                <el-option v-for="item in nursingNames" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="cancleModAdd">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup name="modadd">
import { ref, reactive } from "vue";
import { listItem ,saveOrUpdateItem} from '@/api/CareManagement/careLevel/index';
import { ElMessageBox, ElNotification } from "element-plus";
import { onMounted } from "vue";

const props = defineProps({
    closeModAdd: {
        type: Function,
        required: true
    },
    modAddId: {
        type: Number,
        required: true
    }
});
const form = ref({
    levelId: props.modAddId,
    itemId: "",
    nursingName: "",
});
const nursingNames = ref([]);

const cancleModAdd = (refresh = false) => {
    props.closeModAdd(refresh); // 确保传递参数 refresh，默认值为 false
};
const onSubmit = () => {
    saveOrUpdateItem(form.value).then((success) => {
        ElNotification({
            title: "消息",
            type: "success",
            message: "保存成功",
        });
        cancleModAdd(true); // 确保传递 true 以触发父组件刷新
    });
};
onMounted(async () => {
    try {
        const data = await listItem();
        if (Array.isArray(data)) {
            nursingNames.value = data.map(item => ({
                value: item.id, // 假设数据中有 id 字段作为值
                label: item.nursingName // 假设数据中有 name 字段作为显示名称
            }));
        } else {
            console.error("获取到的数据不是一个数组:", data);
            nursingNames.value = []; // 设置为空数组以避免后续错误
        }
    } catch (error) {
        console.error("获取护理信息失败:", error);
    }
});
</script>

<style scoped>
.demo-form-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px 5px;
}

.demo-form-inline .el-input {
    --el-input-width: 500px;
}
</style>